<html>
<head>
    <title>Code Mirror</title>
    <meta charset='utf-8'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.js'></script>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/midnight.min.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/mathematica/mathematica.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/javascript/javascript.min.js'></script>
</head>
<body>
<script>
function evaluate_in_wolfram_language() {
 const request = new XMLHttpRequest();
 const url = 'http://127.0.0.1:5858';
 data = cmInput.getValue();
 request.onload = function() {
  cmOutput.setValue(request.responseText);
 }
 request.open('POST', url, true);
 request.send(data);
}
</script>

<a href='https://www.wolframcloud.com/obj/arnoudb/wolframserver.wls'>Download and run wolframserver.wls on your local machine</a>

<h4>Wolfram Language input area (press Shift-Enter to evaluate)</h4>
<textarea id='inputArea'></textarea>
<hr>
<h4>ExpressionJSON output area</h4>
<textarea id='outputArea'></textarea>

<script>
var cmInput = CodeMirror.fromTextArea(inputArea, {
 value:'(* add code here *)',
 mode:'mathematica',
 lineNumbers: true,
 theme: 'midnight'
 });
var doc = cmInput.getDoc();
var editor = doc.getEditor();
editor.setOption('extraKeys', { 'Shift-Enter': function(cm) { evaluate_in_wolfram_language(); } } );

var cmOutput = CodeMirror.fromTextArea(outputArea, {
 value:'(* add code here *)',
 mode:'javascript',
 lineNumbers: true,
 theme: 'midnight'
 });
</script>

</body>
</html>